<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表</title>
    <style>
    </style>
    <script src="min_jq/min.js"></script>
    <style>
        .focus1{
            background-color: #aaaa;
        }
        .focus2{
            color: white;
            background-color: #aaaa;
        }
        ul{
            padding: 0;
            margin: 0;
            border: solid 2px;
            width: 634px;
        }
        ul>li{
            list-style: none;
            border-bottom: solid 1px #cccccc;
        }
        ul>li>span{
            border-right: solid 1px #cccccc;
            display: inline-block;
            width: 126px;
            text-align: center;
        }
        table{
            border: solid 2px;
        }
        table>tr>td{
            border: solid 1px #cccccc;
        }
    </style>
</head>
<body>
<ul>
    <li><span>Product</span><span>PriceID</span><span>Code-Quality</span><span>Exp</span><span>Date</span></li>
    <li><span>1</span><span>a</span><span>good</span><span>none</span><span>2024/4/10</span></li>
    <li><span>2</span><span>b</span><span>bad</span><span>none</span><span>2023/4/11</span></li>
    <li><span>3</span><span>c</span><span>good</span><span>none</span><span>2022/4/13</span></li>
    <li><span>4</span><span>d</span><span>bad</span><span>none</span><span>2021/5/12</span></li>
    <li><span>5</span><span>e</span><span>good</span><span>upset</span><span>2020/4/30</span></li>
    <li><span>6</span><span>f</span><span>bad</span><span>down</span><span>2019/7/12</span></li>
</ul>
</body>
    <script>
        // 和 python中的enumerate的操作类似
        $("li:not(li:first)").each(function (index,element){
            $(element).on("mouseover",function (){
                $(element).addClass("focus1")

            })
            $(element).on("mouseout",function (){
                $(element).removeClass("focus1")})
        })
        $("span:gt(4)").each(function (index,element){
            $(element).on("mouseover",function (){
                $(element).addClass("focus2")
            })
            $(element).on("mouseout",function (){
                $(element).removeClass("focus2")})
        })

        $("span")
    </script>
</html>